<template>
  <div class="dashboard-container">
    <!-- v-cdpNodata="true" v-cdpLoading="loading" -->
    <div class="dashboard-text" v-clickoutside="clickOutside">
      name: {{ name }} (clickOutside)
    </div>
    <!-- <semiCircle /> -->
    <!-- <canvasBacka /> -->
    <!-- <svgCircle /> -->
    <!-- <wave /> -->
    <effectAnimate />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import canvasBacka from '@/components/background/canvasBacka.vue'
// import canvasBacka from '@/components/background/solveVue.vue'
// import canvasBacka from '@/components/background/canvasBackb.vue'
// import canvasBacka from '@/components/background/Coalesce.vue'
import canvasBacka from '@/components/background/space.vue'
import svgCircle from '@/components/background/svgCircle.vue'
// import canvasBacka from '@/components/background/pipeline.vue'
import semiCircle from '@/components/semiCircle/semiCircle.vue'
import wave from '@/views/effect/wave/canvas.vue'
import effectAnimate from '@/components/effectAnimate/effect.vue'
export default {
  name: 'Dashboard',
  data() {
    return {
      loading: true,
    }
  },
  components: {
    canvasBacka,
    semiCircle,
    svgCircle,
    wave,
    effectAnimate
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    setTimeout(() => {
      this.loading = false
    }, 2000)
  },
  methods: {
    clickOutside() {
      console.log("clickOutside")
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    overflow: auto;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    cursor: pointer;
  }
}
</style>
